<!-- knotice -->
<template>
  <div class="knotice">
    <div class="knotice-content" v-for="(item,index) in notices" :key="index">{{item.content}}</div>
  </div>
</template>

<script type="text/ecmascript-6">
let seed = 0;
export default {
  data() {
    return {
      notices: []
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    add(notice) {
      let id = `k${seed++}`;
      this.notices.push({
        ...notice,
        id
      });
      let duration = notice.duration || 1.5;
      setTimeout(() => {
        this.remove(id);
      }, duration * 1000);
    },
    remove(id) {
      this.notices = this.notices.filter(o => o.id !== id);
    }
  }
};
</script>
<style scoped>
.knotice {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
}
.knotice-content {
  width: 200px;
  margin: 10px auto;
  font-size: 14px;
  border: red 3px solid;
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
}
</style>